<template>
  <!-- Tabs -->
  <f7-page @page:init="init" :no-navbar="true" no-swipeback>
    <f7-toolbar tabbar bottom labels no-shadow>
      <f7-link tab-link="" route-tab-id="home" icon-f7="house" text="组件" href="./" tab-link-active></f7-link>
      <f7-link tab-link="" route-tab-id="about" icon-f7="gift" text="关于" href="./about/"></f7-link>
      <f7-link tab-link="" route-tab-id="contact" icon-f7="bubble_left_bubble_right" text="联系" href="./contact/"></f7-link>
    </f7-toolbar>
    <f7-tabs routable animated>
      <f7-tab id="home" tab-active></f7-tab>
      <f7-tab id="about"></f7-tab>
      <f7-tab id="contact"></f7-tab>
    </f7-tabs>
  </f7-page>
</template>

<script>
export default {
  name: 'Tabs',
  data(){
    return{}
  },
  methods:{
    init(){}
  }
}
</script>